import React, { Component } from 'react'
import Demo from './component/Demo'

// 注意：
// - 懒加载路由篇：
//   1. 懒加载路由要借助 lazy 和 Suspense，从 react 依赖中引入
//   2. Suspense 要指定 fallback 组件/渲染结构，例如 loading...
//   3. Suspense 的 fallback 如果是组件，则当前组件不可以懒加载
// - Context祖组件传参篇：
//   1. 适用于祖孙及祖组及组件间传参
//   2. 需要引入 React.createContext()，及解构出对应的 Provider（只适用于类组件） 或 Consumer（适用于类和函数组件）
//   3. 在子组件上用 Provider 包裹孙级组件，用 value 做 key 传递给子组件
//   4. 在之后的组件上，采取谁用谁取的方法，取时必须用 static contextType 指定哪一个 context
//   5. 然后用 this.context 解构取值
// - PureComponent:
//   1. 原理：会自动对比状态是否改变，进而决定是否渲染 render
//   2. 使用：如果使用该方式创建组件，状态的改变一定要用新对象
// - renderProps:
//   1. 场景：类似于 Vue 中插槽技术，只不过在 React 中一旦预留，则引用预留代码所在的当前组件时，
//      一定要传入一个组件，否则会报错
//   2. 使用：
//      1. 必须在预留显示子组件的位置调用约定好的方法，一般为 this.props.render(参数)
//         注意：
//         参数可传可不传
//      2. 必须在引用父组件的地方通过约定好的 render 方法，通过返回一个函数，
//         且函数内部的返回值为子组件的方式引入子组件
//         注意：
//         this.props.render() 中的参数通过这里定义的参数传入
//      3. 子组件中通过 this.props 接收传入的参数
// - ErrorBoundary（错误边界）
//   1. 场景：用于在引入组件时，由于各种未知的原因报错，导致页面直接呈现报错信息，造成用户感官的不友好
//      注意：
//      1. 只能用在父组件上
//      2. 只有生产环境能正常错误边界，本地开发会一闪而现
//      3. 只能捕获后代生命周期中错误
//   2. 使用：
//      1. 使用 static getDerivedStateFromError(error) {} 方法，返回错误信息给状态变量
//      2. 在引用子组件时，通过判断错误信息是否有无呈现，如有则显示过度信息，没有则正常显示
//      3. 一般和 componentDidCatch() {} 钩子一起使用，用于在该生命周期里发送错误报告给服务器，
//         进而友好告知相关人员
//         注意：
//         在 static getDerivedStateFromErroe(error) {} 里，不能使用 this

export default class App extends Component {
  render() {
    return (
      <div>
        <Demo />
      </div>
    )
  }
}
